<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=wdge">
    <title>2021年新生毛发市场调研</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <style type="text/css">
        .content {
            background-color: #fff;
            min-height: calc(100vh - 20px);
            padding: 10px 20px;
        }

        .content .submit {
            width: 100%;
            height: 50px;
            color: #fff;
            background-color: #20866e;
            border: none;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .content .van-cell {
            padding: 0;
        }

        .content .Box {
            width: calc(100vw - 60px);
            height: 50px;
            border: 1px solid #dce1e6;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            border-radius: 5px;
            margin-top: 15px;
            padding-left: 20px;
            color: #6a6a6a;
        }

        .content .box-color {
            background-color: #d2e7e2;
        }

        .error {
            color: #f02a40;
            font-size: 14px;
        }

        .textInput {
            border: none
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>

<body>
    <div id="app">
        <my-form></my-form>
    </div>
    <template id="temp">
        <div class="content">
            <div class="name">
                <p>
                    1.姓名
                    <span style="color:#FFAC9E">*</span>
                </p>
                <div class="Box">
                    <input type="text" v-model="name" placeholder="请输入您的姓名" @focus="nameError=false"
                        @blur="blur('name')" class="textInput">
                </div>
                <span v-if="nameError" class="error">* 姓名不能为空</span>
            </div>
            <div>
                <p>
                    2.性别
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-radio-group v-model="gender" @change="genderChange">
                    <div class="Box" :class="{'box-color':gender==='1'}">
                        <van-radio name="1">男</van-radio>
                    </div>
                    <div class="Box" :class="{'box-color':gender==='2'}">
                        <van-radio name="2">女</van-radio>
                    </div>
                </van-radio-group>
                <span v-if="genderError" class="error">* 请选择您的性别</span>
            </div>
            <div class="age">
                <p>
                    3.您的年龄是？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-radio-group v-model="age" @change="ageChange">
                    <div class="Box">
                        <van-radio name="1">18岁以下</van-radio>
                    </div>
                    <div class="Box">
                        <van-radio name="2">18~29岁</van-radio>
                    </div>
                    <div class="Box">
                        <van-radio name="3">30~40岁</van-radio>
                    </div>
                    <div class="Box">
                        <van-radio name="4">40~50岁</van-radio>
                    </div>
                    <div class="Box">
                        <van-radio name="5">50岁以上</van-radio>
                    </div>
                </van-radio-group>
                <span v-if="ageError" class="error">* 请选择您的年龄段</span>
            </div>

            <div>
                <p>
                    4.手机
                    <span style="color:#FFAC9E">*</span>
                </p>
                <div class="Box">
                    <input type="text" class="textInput" v-model="mobile" placeholder="请输入您的手机号" @blur="blur('mobile')"
                        @focus="mobileError=false">
                </div>
                <span v-if="mobileError" ref="mobile" class="error" />
            </div>
            <div>
                <p>
                    5.您是否存在脱发问题？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-radio-group v-model="alopecia" @change="alopeciaChange">
                    <div class="Box" :class="{'box-color':alopecia==='1'}">
                        <van-radio name="1">是</van-radio>
                    </div>
                    <div class="Box" :class="{'box-color':alopecia==='2'}">
                        <van-radio name="2">否</van-radio>
                    </div>
                </van-radio-group>
                <span v-if="alopeciaError" class="error">* 请选择是或否</span>
            </div>

            <div>
                <p>
                    6.您目前的脱发种类是：
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-checkbox-group v-model="alopeciaType" @change="alopeciaTypeChange">
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('a')!==-1}">
                        <van-checkbox shape="square" name="a" :disabled="haveProblemAloDis">头顶脱发</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('b')!==-1}">
                        <van-checkbox shape="square" name="b" :disabled="haveProblemAloDis">发际线高</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('c')!==-1}">
                        <van-checkbox shape="square" name="c" :disabled="haveProblemAloDis">头顶稀疏</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('d')!==-1}">
                        <van-checkbox shape="square" name="d" :disabled="haveProblemAloDis">疤痕性脱发</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('e')!==-1}">
                        <van-checkbox shape="square" name="e" :disabled="haveProblemAloDis">斑秃</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('f')!==-1}">
                        <van-checkbox shape="square" name="f" :disabled="haveProblemAloDis">其它</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':alopeciaType.indexOf('g')!==-1}">
                        <van-checkbox shape="square" name="g" :disabled="noProblemAloDis">无脱发问题，正常头发</van-checkbox>
                    </div>
                </van-checkbox-group>
                <span v-if="alopeciaTypeError" class="error">* 请您至少选中一项</span>
            </div>
            <div>
                <p>
                    7.您对植发是否了解？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-radio-group v-model="understand" @change="understandChange">
                    <div class="Box" :class="{'box-color':understand==='1'}">
                        <van-radio name="1">是</van-radio>
                    </div>
                    <div class="Box" :class="{'box-color':understand==='2'}">
                        <van-radio name="2">否</van-radio>
                    </div>
                </van-radio-group>
                <span v-if="understandError" class="error">* 请选择是或否</span>
            </div>
            <div>
                <p>
                    8.您目前的头皮、头发健康问题？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-checkbox-group v-model="healthy" @change="healthyChange">
                    <div class="Box" :class="{'box-color':healthy.indexOf('a')!==-1}">
                        <van-checkbox shape="square" name="a" :disabled="haveProblemHeaDis">掉发多</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('b')!==-1}">
                        <van-checkbox shape="square" name="b" :disabled="haveProblemHeaDis">头皮屑多</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('c')!==-1}">
                        <van-checkbox shape="square" name="c" :disabled="haveProblemHeaDis">油脂分泌旺盛</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('d')!==-1}">
                        <van-checkbox shape="square" name="d" :disabled="haveProblemHeaDis">头皮经常瘙痒</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('e')!==-1}">
                        <van-checkbox shape="square" name="e" :disabled="haveProblemHeaDis">头发干枯、毛躁</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('f')!==-1}">
                        <van-checkbox shape="square" name="f" :disabled="haveProblemHeaDis">其它</van-checkbox>
                    </div>
                    <div class="Box" :class="{'box-color':healthy.indexOf('g')!==-1}">
                        <van-checkbox shape="square" name="g" :disabled="noProblemHeaDis">无头皮、头发问题</van-checkbox>
                    </div>
                </van-checkbox-group>
                <span v-if="healthyError" class="error">* 请您至少选中一项</span>
            </div>
            <div>
                <p>
                    9.您平时是否有做头皮头发的相关护理？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <van-radio-group v-model="nursing" @change="nursingChange">
                    <div class="Box" :class="{'box-color':nursing==='1'}">
                        <van-radio name="1">是</van-radio>
                    </div>
                    <div class="Box" :class="{'box-color':nursing==='2'}">
                        <van-radio name="2">否</van-radio>
                    </div>
                </van-radio-group>
                <span v-if="nursingError" class="error">* 请选择是或否</span>
            </div>
            <div class="problem">
                <p>
                    10.您最想解决的头皮、头发问题是什么？
                    <span style="color:#FFAC9E">*</span>
                </p>
                <div class="Box">
                    <input type="text" class="textInput" v-model="value" placeholder="请输入您的问题">
                </div>
            </div>
            <van-button class="submit" @click="onSubmit">提交</van-button>
        </div>
    </template>
    <script>
        Vue.component('my\Form', {
            template: '#temp',
            data: () => {
                return {
                    name: null,
                    gender: null,
                    age: null,
                    mobile: null,
                    alopecia: null,
                    alopeciaType: [],
                    understand: null,
                    healthy: [],
                    nursing: null,
                    value: '',
                    nameError: false,
                    genderError: false,
                    ageError: false,
                    mobileError: false,
                    alopeciaError: false,
                    alopeciaTypeError: false,
                    understandError: false,
                    healthyError: false,
                    nursingError: false,
                    noProblemAloDis: false,
                    haveProblemAloDis: false,
                    noProblemHeaDis: false,
                    haveProblemHeaDis: false
                }
            },
            methods: {
                genderChange() {
                    if (this.gender) {
                        this.genderError = false
                    }
                    console.log(123, this.gender)
                },
                ageChange() {
                    if (this.age) {
                        this.ageError = false
                    }
                    console.log(this.gender)
                },
                alopeciaChange() {
                    if (this.alopecia) {
                        this.alopeciaError = false
                    }
                },
                understandChange() {
                    if (this.understand) {
                        this.understandError = false
                    }
                },
                nursingChange() {
                    if (this.nursing) {
                        this.nursingError = false
                    }
                },
                alopeciaTypeChange() {
                    if (this.alopeciaType.length !== 0) {
                        this.alopeciaTypeError = false
                    } else {
                        this.noProblemAloDis = false
                        this.haveProblemAloDis = false
                        return
                    }
                    if (this.alopeciaType.length > 0 && this.alopeciaType.indexOf('g') === -1) {
                        this.noProblemAloDis = true
                        return
                    }
                    if (this.alopeciaType.indexOf('g') !== -1) {
                        this.haveProblemAloDis = true
                        return
                    }
                },
                healthyChange() {
                    console.log(this.healthy)
                    if (this.healthy.length !== 0) {
                        this.healthyError = false
                    } else {
                        this.noProblemHeaDis = false
                        this.haveProblemHeaDis = false
                        return
                    }
                    if (this.healthy.length > 0 && this.healthy.indexOf('g') === -1) {
                        this.noProblemHeaDis = true
                        return
                    }
                    if (this.healthy.indexOf('g') !== -1) {
                        this.haveProblemHeaDis = true
                        return
                    }
                },
                blur(e) {
                    if (e === 'name' && !this.name) {
                        this.nameError = true
                        return
                    }
                    if (e === 'mobile' && !this.mobile) {
                        this.mobileError = true
                        setTimeout(() => {
                            this.$refs.mobile.innerText = '* 请输入您的手机号'
                        }, 1)
                    } else if (e === 'mobile' && this.mobile) {
                        const reg = /^1\d{10}$/g
                        if (!reg.test(this.mobile)) {
                            this.mobileError = true
                            setTimeout(() => {
                                this.$refs.mobile.innerText = '* 请输入11位手机号'
                            }, 1)
                        }
                    }
                },
                onSubmit() {
                    console.log(123456)
                    if (!this.name) {
                        this.nameError = true
                        return
                    }
                    if (!this.gender) {
                        this.genderError = true
                        return
                    }
                    if (!this.age) {
                        this.ageError = true
                        return
                    }
                    if (!this.mobile) {
                        this.mobileError = true
                        setTimeout(() => {
                            this.$refs.mobile.innerText = '* 请输入您的手机号'
                        }, 1)
                        return
                    } else {
                        const reg = /^1\d{10}$/g
                        if (!reg.test(this.mobile)) {
                            this.mobileError = true
                            setTimeout(() => {
                                this.$refs.mobile.innerText = '* 请输入11位手机号'
                            }, 1)
                            return
                        }
                    }
                    if (!this.alopecia) {
                        this.alopeciaError = true
                        return
                    }
                    if (this.alopeciaType.length === 0) {
                        this.alopeciaTypeError = true
                        return
                    }
                    if (!this.understand) {
                        this.understandError = true
                        return
                    }
                    if (this.healthy.length === 0) {
                        this.healthyError = true
                        return
                    }
                    if (!this.nursing) {
                        this.nursingError = true
                        return
                    }
                    const formData = {
                        name: this.name,
                        gender: this.gender,
                        age: this.age,
                        mobile: this.mobile,
                        alopecia: this.alopecia,
                        alopeciaType: this.alopeciaType,
                        understand: this.understand,
                        healthy: this.healthy,
                        nursing: this.nursing,
                        value: this.value
                    }
                    console.log(formData)
                }
            },
        })
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>

</html>